<script setup>
import { ref } from 'vue'

import { sum } from './sum.js'
import Foo from './Foo.vue'
import Bar from './Bar.vue'

const fooRef = ref()
console.log('hello script setup')
const msg = 'Hello!'
function log(msg) {
  console.log(msg)
}
const count = ref(0)

const changeCount = () => {
  count.value++
}

const ope = () => {
  fooRef.value.test()
}
</script>
<template>
  <h3>App: {{ msg }}</h3>
  <p>{{ sum(1, 3) }}</p>
  <p>{{ count }}</p>
  <button @click="log('xxx')">log</button>
  <button @click="count++">+1</button>
  // <component :is="count % 2 ? Foo : Bar" />
  <Foo name="ifer" :age="18" @changeCount="changeCount" ref="fooRef" />

  <button @click="ope">操作子组件的方法</button>
</template>
